/**
 * Created by zzy on 2017/8/21.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    Dimensions,
    Platform,
    ScrollView
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
import ViewPager from '../component/ViewPager'

import ItemCell from '../component/ItemCell'
var qrcode=require('../../asserts/shop/station_details_icon_qrcode.png');
var location=require('../../asserts/shop/station_details_icon_location.png');
var phone=require('../../asserts/shop/station_details_icon_phone.png');
var branch=require('../../asserts/shop/station_details_icon_branch.png');
var time=require('../../asserts/shop/station_details_icon_time.png');

export default class ShopInfo extends Component{

    constructor(props){
        super(props);
        this.shop=this.props.shop;
    }
    render(){
        let stars=[];
        let distributionTime=this.shop.distributionTime;
        for(let i = 0;i<=5;i++){
            stars.push( <Image key={i} style={{width:12,height:12}} source={require('../../asserts/shop/icon_star_orange.png')}></Image>)
        }
        return <View style={{flex:1,backgroundColor:'#f5f5f5'}}>
            <ScrollView>
                <ViewPager/>
                <View style={{flexDirection:'row',backgroundColor:'white',alignItems:'center',justifyContent:'space-between',padding:10}}>
                    <Text>{this.shop.baseInfoModel.name}</Text>
                    <View style={{flexDirection:'row',alignItems:'center'}}>
                        {stars}
                        <Text>{this.shop.baseInfoModel.starsNumber}分</Text>
                    </View>
                </View>

                <View style={{marginTop:10,backgroundColor:'white'}}>
                    <ItemCell icon={qrcode} iconStyle={waterStationStyle.iconStyle} name="店铺二维码"/>
                    <ItemCell icon={location} iconStyle={waterStationStyle.iconStyle} name={this.shop.baseInfoModel.address} rightArrowShow={false}/>
                    <ItemCell icon={phone} iconStyle={waterStationStyle.iconStyle} name={this.shop.baseInfoModel.telephoneNumber} rightArrowShow={false}/>
                    <ItemCell icon={branch} iconStyle={waterStationStyle.iconStyle} name="其他分店" desc="5"/>
                </View>
                <View style={{marginTop:10,backgroundColor:'white'}}>
                    <ItemCell icon={time} iconStyle={waterStationStyle.iconStyle} name="配送时间：" desc={this.shop.distributionTime} rightArrowShow={false}/>
                    <ItemCell icon={time} iconStyle={waterStationStyle.iconStyle} name="配送范围:" desc={this.shop.distributionScope} rightArrowShow={false}/>
                </View>
                <View style={{marginTop:20}}>
                    <Text style={{color:'black',backgroundColor:'white',padding:10}}>商家简介</Text>
                    <Text style={{backgroundColor:'white',marginTop:1,padding:10}}>{this.shop.profile}</Text>
                </View>
            </ScrollView>
        </View>
    }
}

const waterStationStyle=({
    iconStyle:{
        resizeMode:'contain',width:20,height:20
    }
});